<template>
    <el-popover
        placement="right"
        width="400"
        trigger="click">
        <div class="user-info">
            <p>用户ID: {{ user.id }}</p>
            <p>状态: {{ user.status === 1 ? '会员' : (user.status === -2 ? '机器人' :'游客')}}</p>
            <p>昵称: {{ user.nickName }}</p>
            <p>头像:<el-avatar shape="square" :size="20" :src="user.avatarUrl"></el-avatar></p>
            <p>性别: {{ user.gender === 1 ? '男' : (user.gender === 2 ? '女' : '未知'  )}}</p>
            <p v-if="user.official_account">注册时间: {{user.official_account.first_login_at}}</p>
            <p><el-link class="pull-right" :href="'/admin#/user/detail/'+user_id" style="font-size: 12px">查看用户详情</el-link></p>
        </div>
        <el-link @click="showUser" slot="reference" type="primary">
            {{ nickName ? nickName : '用户id:' + user_id }}
        </el-link>
    </el-popover>

</template>

<script>
export default {
    name: "user-column",
    props: {
        user_id: {
            type: Number,
            required: true,
        },
        nickName: {
            type: String,
            required: false,
        }
    },
    data: function () {
        return {
            hide: true,
            loading: false,
            user: {
                id: 0,
                status: 0,
                nickName: '',
                avatarUrl: '',
                gender: 0,
                official_account:{},
            }
        }
    },
    methods: {
        showUser() {
            this.hide = false
            if (this.user.id === 0) this.getUser()
        },
        getUser() {
            this.loading = true;
            this.$store.dispatch('user/Show', this.user_id).then(res => {
                // console.log(res.data)
                this.user = res.data
                // console.log(this.user)
            }).finally(() => {
                this.loading = false
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.user-info {
    p {
        /*height: 30px;*/
        line-height: 30px;
        border-bottom: 1px solid #eee;
        font-size: 12px;
    }
}
</style>
